<!--食品工厂用户可见-->
<template>

  <div class="productForm">
    <!--      设置容器高度-->
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-aside width="100%" style="background-color: rgb(238, 241, 246)">
        <el-row :gutter="20">
          <el-col :span="1000">
            <div class="grid-content bg-purple">
              <div class="grid-content bg-purple">
                <el-input
                  v-model="input"
                  placeholder="请输入"
                  class="input-with-select"
                >
                  <template #prepend>
                    <el-select ref="“optionRef”" v-model="select" clearable placeholder="请选择" style="width: 150px">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </template>
                  <template #append>
                    <el-button type="primary" icon="el-icon-search" plain @click="search">搜索</el-button>
                  </template>
                </el-input>
              </div>
            </div>
          </el-col>
          <el-col :span="100">
            <div class="grid-content bg-purple">
              <el-button type="primary" icon="el-icon-plus" @click="showAddFarm">添加合作物流公司信息</el-button>
            </div>
          </el-col>
          <el-col :span="100">
            <div class="grid-content bg-purple">
              <el-button
                type="primary"
                icon="el-icon-refresh"
                @click="load()"
              >
                刷新
              </el-button>
            </div>
          </el-col>
          <el-col :span="1000">
            <div class="grid-content bg-purple" />
          </el-col>
          <!--          <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>-->
        </el-row>

        <el-dialog title="请仔细核对信息：" :visible.sync="dialogFormVisible">

          <el-form
            ref="vForm"
            :model="formData"
            :rules="rules"
            label-position="left"
            label-width="150px"
            size="medium"
            @submit.native.prevent
          >
            <el-row>
              <el-col :span="10" :offset="1" class="grid-cell">
                <el-form-item label="公司代号：" prop="firmId" class="required label-center-align">
                  <el-input
                    v-model="formData.firmId"
                    type="text"
                    clearable
                    suffix-icon="el-icon-s-goods"
                    :disabled="!isAddForm"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10" :push="2" class="grid-cell">
                <el-form-item label="物流公司名称：" prop="firmlogName" class="required label-center-align">
                  <el-input v-model="formData.firmlogName" type="text" clearable suffix-icon="el-icon-reading" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="1" class="grid-cell">
                <el-form-item label="物流公司负责人：" prop="respName" class="required label-center-align">
                  <el-input
                    v-model="formData.respName"
                    type="text"
                    clearable
                    suffix-icon="el-icon-notebook-1"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="10" :push="2" class="grid-cell">
                <el-form-item label="负责人电话：" prop="resTel" class="required label-center-align">
                  <el-input
                    v-model="formData.resTel"
                    type="text"
                    placeholder="只能输入数字嗷"
                    clearable
                    :minlength="8"
                    :maxlength="11"
                    show-word-limit="true"
                    suffix-icon="el-icon-phone"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10" :offset="1" class="grid-cell">
                <el-form-item label="物流公司简介：" prop="firmlogProfile" class="required label-center-align">
                  <el-input v-model="formData.firmlogProfile" type="text" clearable suffix-icon="el-icon-box" />
                </el-form-item>
              </el-col>
              <el-col :span="10" :push="2" class="grid-cell">
                <el-form-item label="备注:" prop="textareaNote" class="label-center-align">
                  <el-input v-model="formData.textareaNote" type="textarea" placeholder="选填" rows="3" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="addP">确 定</el-button>
          </div>
        </el-dialog>

        <el-scrollbar height="100px">
          <el-table v-loading="loading" :data="tableData" style="width: 100%;margin-top: 8px" max-height="700px">
            <el-table-column fixed type="index" label="序号" width="50" sortable />
            <el-table-column prop="firmId" label="公司代号" width="100" />
            <el-table-column prop="firmlogName" label="物流公司名称" width="150" />
            <el-table-column prop="respName" label="物流公司负责人" width="150" />
            <el-table-column prop="resTel" label="物流公司负责人电话" width="150" />
            <el-table-column prop="firmlogProfile" label="物流公司简介" width="600" />
            <el-table-column prop="note" label="备注" width="300" />
            <el-table-column fixed="right" label="操作" width="150">
              <template #default="scope">
                <el-button
                  link
                  type="warning"
                  size="small"
                  @click.prevent="alterRow(scope.row.firmId)"
                >
                  修改
                </el-button>
                <el-button
                  link
                  type="danger"
                  size="small"
                  @click.prevent="deleteRow(scope.row.firmId)"
                >
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </el-aside>
    </el-container>
    <el-footer>
      <el-pagination
        background
        align="right"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-footer>
  </div>
</template>

<script>

import request from '@/request'

export default {
  name: 'CooperativeLog',
  data() {
    return {
      loading: false,
      isAddForm: false,
      currentPage: 1, // 当前页码
      total: 0, // 总条数
      pageSize: 10, // 每页的数据条数
      tenantId: '',
      input: '',
      select: '',
      options: [{
        value: 'firmId',
        label: '物流公司代号'
      }, {
        value: 'firmlogName',
        label: '物流公司名称'
      }],
      value: '',
      tableData: [],
      dialogFormVisible: false,
      formData: {
        firmId: '',
        firmlogName: '',
        respName: '',
        resTel: '',
        firmlogProfile: '',
        note: ''
      },
      formLabelWidth: '120px',
      rules: {
        firmId: [{
          required: true,
          message: '公司代号不可为空'
        }, {
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: '公司代号仅能是数字组成'
        }],
        firmlogName: [{
          required: true,
          message: '物流公司名称不可为空'
        }],
        respName: [{
          required: true,
          message: '物流公司负责人名字不可为空'
        }],
        resTel: [{
          required: true,
          message: '负责人电话不可为空'
        }, {
          pattern: /^[-]?\d+(\.\d+)?$/,
          trigger: ['blur', 'change'],
          message: '电话仅能为数字'
        }],
        firmlogProfile: [{
          required: true,
          message: '物流公司简介不可为空'
        }]
      }
    }
  },
  created() {
    this.getCookie('tenantid')
    this.load()
  },
  methods: {
    load() {
      this.loading = true
      request.get('/partnerLog/pageAll', {
        params: {
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          tenantId: this.tenantId
        }
      }).then(res => {
        setTimeout(() => {
          this.loading = false
        }, 300)
        this.$notify({
          type: 'success',
          message: '读取成功!',
          offset: 70
        })
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    getCookie(name) {
      const cookieStr = document.cookie
      const cookies = cookieStr.split('; ')
      for (let i = 0; i < cookies.length; i++) {
        const cookie = cookies[i].split('=')
        if (cookie[0] === name) {
          this.tenantId = cookie[1]
        }
      }
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },
    deleteRow(index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete('/partnerLog/delById/', {
          params: {
            firmId: index,
            tenantId: this.tenantId
          }
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.load() // 删除之后重新加载表格的数据
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    search() {
      const choose = this.$refs['“optionRef”'].selected.value
      if (choose === '') {
        this.$message({
          type: 'warning',
          message: '请选择查询类型'
        })
        return
      }
      if (this.input === '') {
        this.$message({
          type: 'warning',
          message: '输入不可为空'
        })
        return
      }
      this.loading = true
      if (choose === 'firmId') {
        request.get('/partnerLog/findById/', {
          params: {
            firmId: this.input,
            tenantId: this.tenantId
          }
        }).then(res => {
          console.log(res)
          if (res.code === 20000) {
            this.tableData = res.data
            this.$message({
              type: 'success',
              message: '物流批次码搜索结束'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      } else {
        request.get('/partnerLog/findByFirmlogName/', {
          params: {
            /* pageNum: this.currentPage,
            pageSize: this.pageSize,*/
            name: this.input,
            tenantId: this.tenantId
          }
        }).then(res => {
          console.log(res)
          if (res.code === 20000) {
            this.tableData = res.data
            this.$message({
              type: 'success',
              message: '产品名称搜索结束'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }
      setTimeout(() => {
        this.loading = false
      }, 300)
    },
    showAddFarm() {
      this.dialogFormVisible = true
      this.isAddForm = true
    },
    alterRow(index) {
      this.dialogFormVisible = true
      this.isAddForm = false
      this.formData.firmId = index
    },
    addP() {
      this.dialogFormVisible = false
      if (this.isAddForm) {
        // 这里实现添加信息
        request.get('/partnerLog/add', {
          params: {
            firmId: this.formData.firmId,
            firmlogName: this.formData.firmlogName,
            respName: this.formData.respName,
            resTel: this.formData.resTel,
            firmlogProfile: this.formData.firmlogProfile,
            note: this.formData.textareaNote,
            tenantId: this.tenantId
          }
        }).then(res => {
          if (res.code === 20000) {
            this.load()
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      } else {
        // 这里实现添加信息
        request.get('/partnerLog/update', {
          params: {
            firmId: this.formData.firmId,
            firmlogName: this.formData.firmlogName,
            respName: this.formData.respName,
            resTel: this.formData.resTel,
            firmlogProfile: this.formData.firmlogProfile,
            note: this.formData.textareaNote,
            tenantId: this.tenantId
          }
        }).then(res => {
          if (res.code === 20000) {
            this.load()
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        })
      }
      this.formData.firmId =
        this.formData.firmlogName =
          this.formData.respName =
            this.formData.resTel =
              this.formData.firmlogProfile =
                this.formData.note = ''
    },
    cancel() {
      this.dialogFormVisible = false
      this.formData.firmId =
        this.formData.firmlogName =
          this.formData.respName =
            this.formData.resTel =
              this.formData.firmlogProfile =
                this.formData.note = ''
      this.$message({
        type: 'info',
        message: '已取消操作'
      })
    }

  }
}
</script>

<style scoped>
.productForm {
  margin-top: 10px;
}

.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.bg-purple {
  background: #d3dce6;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium,
.el-radio {
  line-height: 36px !important;
}

.el-rate {
  margin-top: 8px;
}

.el-form-item--small,
.el-radio {
  line-height: 32px !important;
}

.el-rate {
  margin-top: 6px;
}

.el-form-item--mini,
.el-radio {
  line-height: 28px !important;
}

.el-rate {
  margin-top: 4px;
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}

</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}
</style>
